<template>
  <div>
    <folded-panel open>
      <el-form label-width="100px" size="mini">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item label="开始时间">
              <el-date-picker
                v-model="search.start_time"
                :picker-options="pickerOptions"
                placeholder="选择日期时间"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="search.status">
                <el-option
                  v-for="(item, index) in status"
                  :key="index"
                  :label="item.value"
                  popper-class="w100"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item v-permission="['super']" label="组织">
              <el-select v-model="search.org_id" filterable>
                <el-option
                  v-for="(item, index) in company"
                  :key="index"
                  :label="item.name"
                  popper-class="w100"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="1" style="margin-left: -5%;">
            <el-form-item v-permission="['super']" label="全部">
              <el-checkbox v-model="org_all"/>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-form-item>
          <el-button @click="handleClick">
            <i class="el-icon-aim" style="height: 0.8rem"></i>
            查询威胁
          </el-button>
        </el-form-item>
      </el-form>
    </folded-panel>
    <div class="mt10">
      <el-button size="small" @click="handleChangeToast('Allocation')">
        任务分配
      </el-button>
      <el-button size="small" @click="handleChangeToast('StateChanges')">
        状态变更
      </el-button>
      <el-button
        size="small"
        style="margin-left: 3rem"
        @click="handleChangeToast('Comment')"
      >
        <i
          ><img alt="" src="../../assets/icon/talk.png" style="height: 0.8rem"
        /></i>
        评论
      </el-button>
    </div>
    <el-table
      class="mt10"
      :data="tableData"
      :header-cell-style="{ background: '#f5f5f5' }"
      size="mini"
    >
      <el-table-column label="选择" width="75%">
        <template slot-scope="scope">
          <el-radio
            v-model="tableSelect"
            :label="scope.row.threat_id"
            style="margin-left: 10px;"
            @change="getTemplateRow(scope.row.threat_id)"
          >
            &nbsp;
          </el-radio>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" prop="start_time" sortable />
      <el-table-column label="上一次活动时间" prop="last_time" sortable />
      <!-- <el-table-column label="威胁编号" prop="threat_id" /> -->
      <el-table-column label="终端名" prop="agent_name" sortable />
      <el-table-column label="检测计数" prop="detect_count" sortable />
      <el-table-column
        fit="true"
        label="事件（严重程度 / 检测名 / 数量）"
        min-width="280px"
      >
        <template slot-scope="scope">
          <div v-if="!scope.row.hasOwnProperty('poly_tags_v2')">
            <div v-for="(item, index) in scope.row.poly_tags" :key="index">
              <el-tag
                disable-transitions
                effect="dark"
                size="mini"
                :type="warning"
              >
                {{ item }}
              </el-tag>
            </div>
          </div>
          <div v-if="scope.row.hasOwnProperty('poly_tags_v2')">
            <div v-for="(item, index) in scope.row.poly_tags_v2" :key="index">
              <el-tag
                v-if="item.severity == 1"
                disable-transitions
                effect="light"
                size="mini"
                type="info"
              >
                信息
              </el-tag>
              <el-tag
                v-if="item.severity == 2"
                disable-transitions
                effect="dark"
                size="mini"
                type="info"
              >
                低危
              </el-tag>
              <el-tag
                v-if="item.severity == 3"
                disable-transitions
                effect="dark"
                size="mini"
                type="warning"
              >
                中危
              </el-tag>
              <el-tag
                v-if="item.severity == 4"
                disable-transitions
                effect="dark"
                size="mini"
                type="danger"
              >
                高危
              </el-tag>
              <el-tag
                v-if="item.severity == 5"
                disable-transitions
                effect="dark"
                size="mini"
              >
                紧急
              </el-tag>
              <strong>{{ "    " + item.name + ": " + item.count }}</strong>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="威胁状态" prop="status" sortable />
      <el-table-column
        label="当前任务分配"
        prop="assign"
        sortable
        width="160"
      />
      <el-table-column label="操作" sortable>
        <template slot-scope="scope">
          <el-button
            class="f12"
            style="margin-right: 10px"
            type="text"
            @click="
              $refs.Detail.detail(
                search.org_id || '0',
                scope.row.threat_id,
                scope.row.agent_name,
                scope
              )
            "
          >
            威胁细节
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="mt10 el-row--flex is-justify-end">
      <el-pagination
        background
        :current-page="page"
        layout="total, prev, pager, next"
        :page-size="limit"
        :page-sizes="[100, 200, 300, 400]"
        :total="count"
        @current-change="handleCurrentChangePage"
      />
    </div>
    <detail ref="Detail" @reload="initData" />

    <allocation ref="Allocation" @change="initData" />
    <comment ref="Comment" @change="initData" />
    <state-changes ref="StateChanges" @change="initData" />
  </div>
</template>

<script>
import threat from "@/api/threat";
// import org from "@/api/org";
import Detail from "@/views/menace/detail";
import Allocation from "@/views/menace/toast/Allocation";
import Comment from "@/views/menace/toast/comment";
import StateChanges from "@/views/menace/toast/stateChanges";
import FoldedPanel from "@/components/foldedPanel";
import radioTable from "@/utils/mixin/radioTable";
import checkSelectTable from "@/utils/mixin/checkSelectTable";
import { mapGetters } from "vuex";
import org_getall from "@/utils/mixin/org_getall";
export default {
  name: "List",
  components: { FoldedPanel, StateChanges, Comment, Allocation, Detail },
  mixins: [radioTable, checkSelectTable, org_getall],
  data: () => {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "7 天前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          },
          {
            text: "30 天前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", date);
            }
          },
          {
            text: "90 天前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", date);
            }
          }
        ]
      },
      status: [],
      company: [],
      tableData: [],
      statusDict: {},
      search: {
        org_id: "0",
        start_time: "",
        status: ""
      },
      org_all: false,
      limit: 20,
      page: 1,
      count: 0
    };
  },
  computed: mapGetters(["UserInfo"]),

  mounted() {
    this.loadingOrgGetall();
    this.loadingData();
    if (this.UserInfo.org_id) this.search.org_id = this.UserInfo.org_id;
  },
  methods: {
    handleChangeToast(name) {
      let threatData = {};
      this.is_check_table("threat_id") &&
        (threatData = this.is_get_select_data()) &&
        this.$refs[name].show(
          this.search.org_id,
          threatData.threat_id,
          threatData
        );
    },
    handleCurrentChangePage(val) {
      this.page = val;
      this.initData();
    },

    handleCurrentChange(val) {
      this.currentRow = val;
    },
    async loadingData() {
      await threat.status_list().then(res => {
        let keyMap = res.data["status_list"];
        let list = Object.keys(keyMap).map(k => {
          return {
            id: k,
            value: keyMap[k]
          };
        });
        list.unshift({ id: "0", value: "全部" });
        this.status = list.slice(0);
        this.statusDict = keyMap;
      });
      await this.initData();
    },
    initData() {
      let searchData = Object.assign({}, this.search);
      let tempDate = new Date();
      tempDate.setDate(tempDate.getDate() - 30);
      searchData.start_time =
        searchData.start_time || tempDate.Format("yyyy-MM-dd hh:mm:ss");
      const org_id = searchData.org_id;
      searchData.org_id = this.org_all ? 0 : org_id;
      return threat
        .list({
          ...searchData,
          limit: this.limit,
          page: this.page
        })
        .then(res => {
          res.data.threat_list = res.data.threat_list.map(k => {
            k.start_time = new Date(k.start_time).Format("yyyy-MM-dd hh:mm:ss");
            k.last_time = new Date(k.last_time).Format("yyyy-MM-dd hh:mm:ss");
            return k;
          });
          this.count = res.data.count;
          this.tableData = res.data.threat_list;
        });
    },
    handleClick() {
      this.page = 1;
      this.initData();
    }
  }
};
</script>

<style lang="scss" scoped>
//::v-deep .el-select {
//  width: 100%;
//}
</style>
